<template>
	<view>
		<view style="width: 100%;height: 100%;position: absolute;z-index: -1;background-color: #13161B;"></view>
		<view class="medal_list_view">
			<view @click="goToMedalDetail(index)" class="medal_item" v-for="(item,index) in list" :key="index">
				<image class="medal_icon" :src="item.obtain == 0 ? item.unStylePicAbsolute : item.picAbsolute"></image>
				<label class="medal_name">{{ item.name }}</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		methods: {
			requestList() {
				this.request.httpTokenJsonRequest('/mp-api/wx/medal/my',null,'POST',true).then( res=> {
					if (res.code == 0) {
						this.list = res.data.reverse()
					}
				})
			},
			goToMedalDetail(index) {
				const item = this.list[index]
				uni.navigateTo({
					url:`/packageMine/pages/myMedal/medaldetail/medaldetail?id=${item.id}&obtain=${item.obtain}`
				})
			}
		},
		onLoad() {
			this.requestList()
		}
	}
</script>

<style scoped>
	page {
		background-color: #13161B;
	}
	.medal_list_view {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		margin-left: 60rpx;
		margin-right: 0rpx;
		width: calc(100% - 60rpx);
		height: 100%;
	}
	.medal_item {
		margin-top: 40rpx;
		width: 168rpx;
		margin-right: 62rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.medal_icon {
		width: 168rpx;
		height: 168rpx;
	}
	.medal_name {
		color: #FFFFFF;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
</style>
